import Taro, { redirectTo, setNavigationBarTitle } from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'
import { AtIcon, AtForm, AtButton, AtInput } from 'taro-ui'
import React, { useState, useEffect } from 'react'

import api, { host } from '../../utils/api'
import request from '../../utils/request'
import { useAsyncEffect } from '../../utils/index'

import IconContract from '../../images/icon-contract.png'
import IconDocument from '../../images/icon-document.png'
import IconDownload from '../../images/icon-download.png'

import './realname.less'

function RealName() {
  useEffect(() => {
    try {
      setNavigationBarTitle({
        title: '实名信息'
      })
      request(api.userInfo, 'GET').then(res => {
        let data = res.member
        setUserInfo(data)
        setPictures([data.id_card_front, data.id_card_reverse])
      })
    } catch (error) {
      console.log(error)
      Taro.showToast({
        title: '获取用户信息失败',
        icon: 'none'
      })
    }
  }, [])

  const [userInfo, setUserInfo] = useState({})
  const [pictures, setPictures] = useState([])
  const previewPic = (url) => {
    Taro.previewImage({
      current: url,
      urls: pictures
    })
  }
  return (
    <View className='realname'>
      <View className='layout'>
        <View className='bg'></View>
        <View className='top'></View>
        <View className='cell-group group'>
          <AtForm>
            <View className='row'>
              <AtInput
                name='real_name'
                type='text'
                className='input'
                title='真实姓名'
                placeholder='请输入真实姓名'
                value={userInfo.real_name}
              />
            </View>
            <View className='row'>
              <AtInput
                name='phone'
                type='text'
                className='input'
                title='联系方式'
                placeholder='请输入联系方式'
                value={userInfo.phone}
              />
            </View>
            <View className='row'>
              <AtInput
                name='idNumber'
                type='text'
                className='input'
                title='身份证号'
                placeholder='请输入身份证号'
                value={userInfo.id_card}
              />
            </View>
            <View className='row'>
              <AtInput
                type='text'
                className='input'
                title='身份证照片'
              />
              <View className='pics'>
                <Image onClick={previewPic.bind(this, userInfo.id_card_front)} mode='aspectFit' src={userInfo.id_card_front} className='idcard front'></Image>
                <Image onClick={previewPic.bind(this, userInfo.id_card_reverse)} mode='aspectFit' src={userInfo.id_card_reverse} className='idcard '></Image>
              </View>
            </View>
          </AtForm>
        </View>
      </View>
    </View>
  )
}

export default RealName
